import React, { Component } from 'react';
import { Spin } from 'antd';
import { post } from '../../Lib/Http';
import apiUrl from '../../Config/web';
import Head from '../question/Head';
import './result.css';
import Score from './component/score';
import Card from './component/card';
import { Modal, List, Button, WhiteSpace} from 'antd-mobile';


class Result extends Component {

    constructor(props){
        super(props);

        this.state = {
            modal2: false,
        };

    }

    componentDidMount(){

        let _b_url = this.props.history.location.pathname;
        window._hmt.push(['_trackPageview', _b_url]);


        let result = this;

        let locationData = this.props.location.state.h_data;
        if(locationData !== undefined){
            locationData = JSON.parse(locationData);
            result.setState({
                data:locationData,
                trueAnswer:'',
                yourAnswer:''
            });

            return;
        }

        const param = this.props.location.state

        post(apiUrl.result, param, function(response){
           
            response = response.data;

            if(response.code === 0){
                result.setState({
                    data:response.data,
                    trueAnswer:'',
                    yourAnswer:''
                });
            }

            

        }, function(error){
            console.log(error);
        });

    }

    //修复安卓
    closest(el, selector) {
        const matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector;
        while (el) {
          if (matchesSelector.call(el, selector)) {
            return el;
          }
          el = el.parentElement;
        }
        return null;
    }


    //显示答案
    showModaFunction(e, trueAnswer, yourAnswer){

        e.preventDefault();

        this.setState({
            modal2:true,
            yourAnswer:yourAnswer,
            trueAnswer:trueAnswer
        })

    }


    //点击阴影关闭
    onWrapTouchStart = (e) => {
        // fix touch to scroll background page on iOS
        if (!/iPhone|iPod|iPad/i.test(navigator.userAgent)) {
            return;
        }
        const pNode = this.closest(e.target, '.am-modal-content');
        if (!pNode) {
          e.preventDefault();
        }
    }

    //关闭弹窗显示
    onClose = key => () => {
        this.setState({
          [key]: false,
        });
    }

    //计算高度
    countHeight(){
        let height = window.innerHeight;
        let result = 100-(44/height*100);
        return result+'%';
    }


    //到下一题
    toNext(e){
 
        let that = this;

        let next = this.state.data.next;

        if(next === '-1' || next === -1){

            let book = this.state.data.book;

            const alert = Modal.alert;

            alert('提示', '已做完试卷,是否回到封面?', [
                { text: '取消', onPress: () => console.log('cancel'), style: 'default' },
                { text: '确认', onPress: () => that.props.history.push('/detail/'+book) },
            ]);

            return;
        }

        this.props.history.push('/exam/'+next);

        return;
    }

    //到结果
    toAnalysis(){
       let id = this.props.location.state.id;
       this.props.history.push('/analysis/'+id);
    }



    render() {

        const data = this.state.data;

        let height = this.countHeight();

        if(data === undefined || data === null){
            return (
                <Spin tip="Loading..." className="home-loding" size="large" />
            );
        }

        const type = this.props.location.state.type;

        return (
            <div className='root background-white'>



                <Modal popup visible={this.state.modal2}  onClose={this.onClose('modal2')} animationType="slide-up">
                    <List renderHeader={() => <div>正确答案</div>} className="popup-list">
                        {[this.state.trueAnswer, this.state.yourAnswer].map((i, index) => (
                            <List.Item key={index}>{i}</List.Item>
                        ))}
                        <List.Item>
                            <Button type="primary" onClick={this.onClose('modal2')}>确认</Button>
                        </List.Item>
                    </List>
                </Modal>

                <Head history={this.props.history} title='考试结果'></Head>

                <div className="question2-view" style={{height:height}}>
                    <Score data={this.state}></Score>

                    <div className='answer-detail-title-box'>
                        <div className='answer-detail-title'>
                            <span>答题卡</span>

                            <div className="hinit-box">
                                <span className="round-spot yellow-bg"></span>
                                <span className="hinit">未作答</span>
                            </div>

                            <div className="hinit-box">
                                <span className="round-spot red-bg"></span>
                                <span className="hinit">答错</span>
                            </div>


                            <div className="hinit-box">
                                <span className="round-spot green-bg"></span>
                                <span className="hinit">答对</span>
                            </div>
                            
                        </div>
                    </div>

                    <Card show={this.showModaFunction.bind(this)}  result={this.state} type={type}></Card>
                </div>

                <div className="bottom-card">
                    <div className="bottom-row">
                        <div onClick= {(e)=>{this.toAnalysis(e)}} className="bottom-selection">查看详细解析</div>
                        <div onClick={(e)=>{this.toNext(e)}}  className="bottom-selection">继续做下一题</div>
                    </div>
                </div>

            </div>
        );
        
    }
}

export default Result;